<template>
  <div
    style="height:50px;line-height:50px;border-bottom:1px solid #ccc; display:flex; "
  >
    <div
      style="width: 200px; padding-left: 30px; font-weight: bold; color: blue"
    >
      后台管理
    </div>
    <div style="flex: 1"></div>
    <div style="width: 100px">
      <el-dropdown>
        <span class="el-dropdown-link">
          张三<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="$router.push('/person')">个人中心</el-dropdown-item>
          <el-dropdown-item>头像修改</el-dropdown-item>
          <el-dropdown-item>密码修改</el-dropdown-item>
          <!-- 跳转至登录页面   直接按钮绑定不能跳转，添加.native后可以-->
          <el-dropdown-item @click.native="$router.push('/login')">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

  </div>
</template>

<script>
export default {
   name: "Header",
   props: ['user'],
  data() {
    return {

    }
  },
  created() {
  }
};
</script>
<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>